<template>
	<view>
		<u-search class="u-search" :show-action="true" action-text="搜索" v-model="searchForm.condition" @search="inputSearch()"
			@custom="inputSearch()" ></u-search>
		<view class="container">
			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据">
				<uni-tr>
					<uni-th align="center" width="100">设置</uni-th>
					<uni-th align="center" v-for="(col,index) in columns"
						:key="index">{{col.value}}</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, rowIndex) in currentPageData" :key="rowIndex">
					<uni-td>
						<view class="uni-group">
							<button class="uni-button" size="mini" type="primary" @click="onClickItem(item)">选择</button>
						</view>
					</uni-td>
					<uni-td align="center" v-for="(col, colIndex) in columns" :key="colIndex">
						{{item[col.key] || '-'}}
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<view class="pagination-wrapper">
			<uni-pagination :total="total" :current="currentPage" :pageSize="pageSize" @change="handlePageChange" />
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loading: false,
				searchForm: {
					condition: "",
				},
				columns: [],
				total: 0, // 总条数
				pageSize: 10, // 每页条数
				currentPage: 1, // 当前页码
				allData: [], // 存储所有数据
				currentPageData: [], // 当前页显示的数据
				formConfig: {},
				formData: {},
			}
		},
		onLoad() {
			const eventChannel = this.getOpenerEventChannel();
			eventChannel.on('sendData', (data) => {
				// uni.setNavigationBarTitle({
				// 	title: data.sTypeName
				// });
				this.formConfig = data
				this.fetchAllData();
			});
			
		},
		methods: {
			 inputSearch() {
			    const searchCondition = this.searchForm.condition.trim();
			    let filteredData = [...this.allData]; // 复制一份全部数据用于筛选
			    if (searchCondition) {
			      // 用户输入了搜索条件，进行模糊查询
			      filteredData = this.allData.filter(item => {
			        return this.columns.some(col => {
			          return String(item[col.key]).includes(searchCondition);
			        });
			      });
			    }
			    // 更新总条数和当前页数据
			    this.total = filteredData.length;
			    this.updateCurrentPageData(filteredData);
			  },

			async fetchAllData() {
				// this.formConfig = {
				// 	label: "款号",
				// 	value: "style",
				// 	type: "dialog",
				// 	display: "true",
				// 	readOnly: "false",
				// 	dialogForm: {
				// 		search: "orderName",
				// 		columns: [{
				// 				key: "order",
				// 				value: "订单号"
				// 			},
				// 			{
				// 				key: "style",
				// 				value: "款号"
				// 			}
				// 		],
				// 		tableData: [{
				// 			order: "21570921",
				// 			style: "2970956271"
				// 		}]
				// 	}
				// }
				this.columns = this.formConfig.dialogForm.columns;
				this.allData = this.formConfig.dialogForm.tableData;
				this.total = this.formConfig.dialogForm.tableData.length;
				this.updateCurrentPageData();
			},
			
			 // 更新当前页数据，增加参数以支持传入筛选后的数据
			  updateCurrentPageData(data = this.allData) {
			    const start = (this.currentPage - 1) * this.pageSize;
			    const end = start + this.pageSize;
			    this.currentPageData = data.slice(start, end);
			  },
			
			// 分页改变
			handlePageChange(e) {
				this.currentPage = e.current;
				this.updateCurrentPageData();
			},

			onClickItem(item) {
				const data = {
					"item": item,
					"columns": this.columns
				}
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('acceptFormData', data);
				uni.navigateBack();
			}
		}
	}
</script>


<style>
	.container {
		position: relative;
		height: calc(100vh - 160px);
		/* 减去搜索框和分页器高度 */
		overflow: auto;
		/* 只在容器内部滚动 */
	}

	.pagination-wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 10px;
		box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
		z-index: 100;
		height: 60px;
		/* 固定高度 */
	}
	 .u-search { margin: 0px 20px !important; height: 50px; }
</style>